<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DockerFly</title>
</head>
<link rel="shortcut icon" type="image/x-icon" href="../../img/favicon.ico"/>
<link rel="stylesheet" href="../../css/uikit/uikit.css"/>
<script src="../../js/common/jquery.min.js"></script>
<script src="../../js/common/vue.min.js"></script>
<script src="../../js/common/uikit.js"></script>

<link rel="stylesheet" href="../../css/main.css"/>
<script lang="javascript" src="../../js/utils.js"></script>
<script lang="javascript" src="../../js/docker.js"></script>
<script lang="javascript">
    doImport("org.voovan.docker.command.Image.CmdHubImageInfo")
    doImport("org.voovan.docker.command.Image.CmdImageRemove")
    doImport("org.voovan.docker.command.Image.CmdImageCreate")
    doImport("org.voovan.docker.command.Image.CmdImageTag")

    function init() {
        imageListVue = new Vue({
            el: '#imageApp',
            data: {
                hubImageList: null,
                pullTag:"latest",
                searchParams:{
                    name:"",
                    limit:10
                }
            },
            methods: {
                search: function () {
                    try {
                        if (this.searchParams.name == "") {
                            return
                        }
                        var cmdHubImageInfo = new CmdHubImageInfo();
                        connect(cmdHubImageInfo);
                        cmdHubImageInfo.term(this.searchParams.name);
                        cmdHubImageInfo.limit(this.searchParams.limit);

                        var blockDialog = openBlockDialog("Searching image...");
                        cmdHubImageInfo.send(function(msg){
                            blockDialog.hide()
                            imageListVue.hubImageList = msg.sortBy("star_count", true);
                            cmdHubImageInfo.close();
                            cmdHubImageInfo.release();
                        }, function(status, errMsg){
                            blockDialog.hide()
                            var errorObj = eval("errorObj="+errMsg)
                            alertError("Search image "+imageListVue.searchParams.name+" failed <br/>"+errorObj.errMsg);
                            cmdHubImageInfo.close();
                            cmdHubImageInfo.release();
                        })
                    } catch (e) {
                        alertError(e)
                    }
                },
                pull: function (hubImage) {
                    try {
                        this.pullTag = "latest";
                        UIkit.modal.prompt("Pull an image with tag:", this.pullTag, function(newvalue) {
                            this.pullTag = newvalue;
                            var cmdImageCreate = new CmdImageCreate();
                            cmdImageCreate.connect1(1800);
                            cmdImageCreate.fromImage(hubImage.name);
                            cmdImageCreate.tag(this.pullTag);

                            var blockDialog = openBlockDialog("Pulling image...");
                            cmdImageCreate.send(function(msg){
                                blockDialog.hide();
                                alert("<span class='uk-text-large uk-text-primary'>" +
                                    "Pull image " +
                                    "finished.</span>")
                                cmdImageCreate.close();
                                cmdImageCreate.release();
                            }, function(status, errMsg){
                                blockDialog.hide();
                                var errorObj = eval("errorObj="+errMsg)
                                alertError("Pull image failed <br/>"+errorObj.errMsg);
                                cmdImageCreate.close();
                                cmdImageCreate.release();
                            });
                        })
                    } catch (e) {
                        alertError(e)
                    }
                }
            }
        });
    }
</script>
<body onload="init()" class="frameBody">
<div id="imageApp" class="uk-grid">
    <div class="uk-width-6-6">
        <div class="uk-panel"></div>
        <h3></h3>
        <div class="uk-grid uk-margin">
            <div class="uk-width-1-2">
                <h3 class="uk-text-middle">
                    <span class="icon uk-icon-object-group"></span>&nbsp;Pull image from docker hub
                </h3>
            </div>
        </div>
        <div class="">
            <div class="uk-panel uk-panel-box uk-text-bold uk-margin-bottom">
                <div class="uk-grid">
                    <div class="uk-width-5-6 uk-form">
                        <span class="mr5">Name:</span>
                        <input class="uk-form-width-medium"
                               type="text" placeholder="e.g. nginx" v-model="searchParams.name"/>
                        <select v-model="searchParams.limit">
                            <option value="5">5</option>
                            <option value="10">10</option>
                            <option value="20">20</option>
                            <option value="30">30</option>
                            <option value="40">40</option>
                            <option value="50">50</option>
                        </select>
                        <a class="uk-button uk-button-small" @click="search()"><i class="uk-icon-search"></i></a>
                    </div>
                </div>
            </div>
            <div class="uk-grid uk-text-center">
                <div class="uk-width-1-3"
                     v-for="(hubImage,index) in hubImageList " :key='hubImage.star_count'>
                    <div class="uk-panel uk-panel-box uk-panel-space uk-text-left uk-margin-bottom">
                        <div class="uk-grid uk-alert"
                            :class="{'uk-alert-danger':!hubImage.is_official}">
                            <span class="uk-width-8-10 uk-text-bold"  style="padding-left:10px">
                                <span class="uk-icon-file-text"></span>
                                <span>
                                    {{hubImage.name|shortString(28)}}{{hubImage.name.length>28?"...":""}}
                                </span>
                            </span>
                            <span class="uk-width-2-10 uk-text-small uk-badge uk-badge-notification">
                                <span class="uk-icon-star"></span> {{hubImage.star_count | shortNumber}}
                            </span>
                        </div>
                        <div class="uk-panel-body" style="height: 70px;">
                            <div>
                                {{hubImage.description}}
                            </div>
                            <div class="uk-text-right uk-position-bottom-right uk-margin-bottom uk-margin-large-right">
                                <a href="#" class="uk-button uk-button-small uk-button-success"
                                   @click="pull(hubImage)"><span class="uk-icon-cloud-download"></span> Pull </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!--
            <table id="hubImageList" class="uk-table uk-overflow-container uk-panel-box">
                <caption>Hub image list</caption>
                <thead>
                <tr>
                    <th class="uk-text-center table_colume_index">NO.</th>
                    <th class="uk-width-2-10">Name</th>
                    <th class="" style="width: 50px">Star</th>
                    <th class="uk-text-center" style="width: 50px">Official</th>
                    <th class="">Description</th>
                    <th class="uk-text-center">Operation</th>
                </tr>
                </thead>
                <tbody>
                <tr v-for="(hubImage,index) in hubImageList " :key='hubImage.star_count'>
                    <td class="uk-text-center uk-text-middle uk-text-small">{{index+1}}</td>
                    <td class="uk-text-bold uk-text-middle uk-text-primary">
                        {{hubImage.name}}
                    </td>
                    <td class="uk-text-bold uk-text-middle uk-text-danger">
                        <span class="uk-icon-star"></span>{{hubImage.star_count}}
                    </td>
                    <td class="uk-text-center uk-text-success">
                        <span :class="{'uk-icon-check-square':hubImage.is_official,'uk-icon-square':!hubImage.is_official}"></span>
                    </td>
                    <td>{{hubImage.description}}</td>
                    <td class="uk-text-center uk-text-middle">
                        <input class="uk-button uk-button-small uk-button-primary" type="button" value="Pull"
                               @click="pull(hubImage)"/>
                    </td>
                </tr>
                </tbody>
            </table>
            -->
        </div>
    </div>
    <div class="uk-width-6-6">
        <div style="min-height:40px;" class="uk-text-center uk-margin-bottom">
            <div><img height="27" width="120" src="../../img/logo.png"/></div>
            <div>Copyright <span class="uk-icon-copyright"></span> Voovan Vsetful</div>
            <div>Powered by Voovan open source framework.</div>
            <div></div>
        </div>
    </div>
</div>

</body>
</html>